<template>
  <div class="f-container">
    <div v-loading="sendLoading" style="overflow:hidden;">
<!--      <mix-add-->
<!--        ref="mixadd"-->
<!--        :crm-type="crmType"-->
<!--        :id="id"-->
<!--        :detail="detail"-->
<!--        :show-relative-business="false"-->
<!--        :show-relative-contacts="true"-->
<!--        @mixadd-info="submitInfo"/>-->
<!--      <flexbox class="se-section">-->
<!--        <div class="se-name">记录类型</div>-->
<!--        <el-dropdown-->
<!--          style="margin-right: 20px;"-->
<!--          trigger="click"-->
<!--          @command="handleTypeDrop">-->
<!--          <flexbox class="se-select">-->
<!--            <div class="se-select-name">{{ followType ? followType : '请选择' }}</div>-->
<!--            <i-->
<!--              class="el-icon-arrow-down el-icon&#45;&#45;right"-->
<!--              style="color:#ccc;"/>-->
<!--          </flexbox>-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item-->
<!--              v-for="(item, index) in followTypes"-->
<!--              :key="index"-->
<!--              :command="item.type">{{ item.name }}</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--        <div class="se-name"><label style="color: red"> * </label>下次联系时间</div>-->
<!--        <el-date-picker-->
<!--          v-model="nextTime"-->
<!--          :default-value="new Date"-->
<!--          :editable="false"-->
<!--          class="se-datepicker"-->
<!--          type="datetime"-->
<!--          placeholder="选择日期"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss"/>-->
<!--&lt;!&ndash;        <el-checkbox&ndash;&gt;-->
<!--&lt;!&ndash;          v-if="showOAPermission"&ndash;&gt;-->
<!--&lt;!&ndash;          v-model="isEvent">添加到日程提醒</el-checkbox>&ndash;&gt;-->
<!--        <div class="se-name"><label style="color: red"> * </label>设备台数</div>-->
<!--        <el-input class="se-input" v-model="equipmentNum" type="number" />-->
<!--      </flexbox>-->
<!--      <flexbox class="se-section">-->
<!--        <div class="se-name"><label style="color: red"> * </label>商机背景</div>-->
<!--        <el-input-->
<!--          v-model="background"-->
<!--          class="se-textarea"-->
<!--          type="textarea"-->
<!--          placeholder="请输入内容">-->
<!--        </el-input>-->
<!--        <el-button-->
<!--          class="se-send"-->
<!--          type="primary"-->
<!--          @click.native="sendInfo">发布</el-button>-->
<!--      </flexbox>-->
      <el-button
        class="se-send"
        style="float: right"
        type="primary"
        @click.native="addBusinessLog">新建商机日志</el-button>
    </div>
    <div class="log-cont">
      <flexbox style="border-bottom: 1px solid #E6E6E6;">
        <flexbox
          v-for="(item, index) in logTypes"
          :key="index"
          style="width: auto;"
          @click.native="logTabsClick(item,index)">
          <div
            :style="{ color: logType==item.type ? '#F18C70' : '#777'}"
            class="log-tabs-item">{{ item.name }}</div>
          <div
            v-if="logTypes.length -1 != index"
            class="log-tabs-line"/>
        </flexbox>
      </flexbox>
      <keep-alive>
        <component
          :is="componentsName"
          :id="id"
          :crm-type="crmType"/>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import MixAdd from '../../components/MixAdd'
import RecordLog from '../../components/followLog/RecordLog' // 商机日志
import JournalLog from '../../components/followLog/JournalLog' // 日志列表
import ExamineLog from '../../components/followLog/ExamineLog' // 审批列表
import TaskLog from '../../components/followLog/TaskLog' // 任务日志列表
import ScheduleLog from '../../components/followLog/ScheduleLog' // 日程日志列表
import { crmBusinessRecordSave, crmBusinessQueryContactsAPI,crmBusinessLastRecord } from '@/api/customermanagement/business'
import followLogType from '@/views/customermanagement/mixins/followLogType'
import { queryBusinessFollowRecordContentFieldsAPI } from "@/api/customermanagement/common";
export default {
  /** 客户管理 的 商机详情 的 商机日志*/
  name: 'BusinessFollow',
  components: {
    MixAdd,
    RecordLog,
    JournalLog,
    ExamineLog,
    TaskLog,
    ScheduleLog
  },
  mixins: [followLogType],
  props: {
    /** 模块ID */
    id: [String, Number],
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: ''
    },
    /** 详情数据 */
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      sendLoading: false,
      /** 下次联系时间 */
      nextTime: '',
      /** 是否添加日程提醒 */
      isEvent: false,
      logType: 'record',
      equipmentNum: 0,
      background: ''
    }
  },
  computed: {
    logTypes() {
      if (this.oa) {
        return [
          { type: 'record', name: '商机日志' }
          // { type: 'log', name: '日志' },
          // { type: 'examine', name: '审批' },
          // { type: 'task', name: '任务' },
          // { type: 'schedule', name: '日程' }
        ]
      } else {
        return [{ type: 'record', name: '商机日志' }]
      }
    },

    componentsName() {
      if (this.logType == 'record') {
        return 'RecordLog'
      } else if (this.logType == 'log') {
        return 'JournalLog'
      } else if (this.logType == 'examine') {
        return 'ExamineLog'
      } else if (this.logType == 'task') {
        return 'TaskLog'
      } else if (this.logType == 'schedule') {
        return 'ScheduleLog'
      }
      return ''
    }
  },
  watch: {},
  mounted() {},
  activated: function() {
    // 默认将客户的设备数带过
    this.equipmentNum = this.detail.equipmentNum;
    this.background = this.detail.background
    this.sendLoading = true;
    queryBusinessFollowRecordContentFieldsAPI().then((res) => {
      if(!res.data.list.length){
        return
      }
      this.detail.contentList = res.data.list;
      let params = {
        typesId: this.id
      }
      crmBusinessLastRecord(params).then(res => {
        this.sendLoading = false;
        let data = res.data;
        this.detail.contentList.map(item => {
          if(item.nextValueTwo == 'AUTO'){
            item.contentValue = data ? data[item.name] : '';
          }
        })
      }).catch(res => {this.sendLoading = false;})
    }).catch(res => {this.sendLoading = false;});

    let params = {
      businessId: this.id
    }
    crmBusinessQueryContactsAPI(params).then(res => {
      this.detail.contacts = res.data.list;
    })
  },
  deactivated: function() {},
  methods: {
    /** 发布 时候的类型选择 */
    handleTypeDrop(command) {
      this.followType = command
    },
    logTabsClick(item, index) {
      this.logType = item.type
    },
    /** 告诉mixad 返回数据 */
    sendInfo() {
      this.$refs.mixadd.$emit('submit-info')
    },
    // 新建商机日志
    addBusinessLog() {
      this.$emit('show-record', {
        customerId: this.detail.customerId,
        customerName: this.detail.customerName,
        businessId: this.detail.businessId,
        businessName: this.detail.businessName })
    },
    //校验数字
    checkNumber(number){
      if(typeof number == 'string'){
        if(number.trim().length){
          return true;
        }
      }else if (typeof number == 'number'){
        if(number >= 0){
          return true;
        }
      }
      return false
    },
    /** 快捷添加框内 返回的数据用于上传 */
    submitInfo(data) {
      if (!this.nextTime) {
        this.$message.error('请选择下次联系时间')
        return
      } else if (!data.content) {
        this.$message.error('请输入跟进内容')
        return
      } else if (!this.checkNumber(this.equipmentNum)) {
        this.$message.error('必须填写设备台数')
        return
      } else if (!this.background) {
        this.$message.error('必须填写商机背景')
        return
      }
      // 发布成功后，关闭输入框
      this.$refs.mixadd.isCloseContent = true
      var params = {}
      params.typesId = this.id
      params.content = data.content
      Object.keys(data.contentValue).forEach(item => {
        params[item] = data.contentValue[item];
      })
      params.category = this.followType
      var contactsIds = data.contacts.map(function(element, index, array) {
        return element.contactsId
      })
      params.batchId = data.batchId
      params.contactsIds = contactsIds.join(',')
      params.isEvent = this.isEvent ? 1 : 0
      params.nextTime = this.nextTime || ''
      params.equipmentNum = this.equipmentNum
      params.background = this.background
      this.sendLoading = true
      crmBusinessRecordSave(params)
        .then(res => {
          this.sendLoading = false
          this.$message.success('发布成功')
          // 重置页面
          this.$refs.mixadd.resetInfo()
          this.isEvent = false
          this.nextTime = ''
          // 刷新数据
          this.$bus.emit('follow-log-refresh', { type: 'record-log' })
        })
        .catch(() => {
          this.sendLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/followlog.scss';
  .se-textarea{
    width:calc(100% - 140px);
  }
</style>
